<template>
	<view v-if="instance" class="relative">
		<u-gap height="8"></u-gap>
		<u-cell :border="false" class="mx-[8px] bg-[#FFFFFF] rounded-[4px]" :titleStyle="{color:'#FF0000'}" :title="instance.StateName"></u-cell>
		<view class="mx-[8px] mt-[8px] px-[15px] py-[10px] flex flex-row items-center bg-[#FFFFFF] rounded-[4px]">
			<view class="flex-1 mr-[16px]" v-if="false">
				提货方式：自提
			</view>
			<view class="flex-1 mr-[16px]">
				<view class="text-[14px] text-[#333333]">
					<text>收货人:{{instance.LinkMan}}</text>
					<text class="ml-[16px]">手机号:{{instance.Mobile}}</text>
				</view>
				<view class="text-[14px] text-[#999999] mt-[4px]">收货地址:{{instance.AreaStr+instance.Address}}</view>
			</view>
			<u-button v-if="false" :customStyle="{padding:'0 14px',height:'36px'}" class="flex-shrink-0" text="修改" type="success" shape="circle"></u-button>
		</view>
		<u-cell v-if="instance.LogisticsNo" :border="false" class="mt-[8px] mx-[8px] bg-[#FFFFFF] rounded-[4px]" :title="instance.LogisticsName">
			<template #label>
				<view class="flex flex-row items-center text-[13px] text-[#999999]">
					<text>快递单号:</text>
					<text>{{instance.LogisticsNo}}</text>
					<u-icon @click="copy(instance.LogisticsNo)" name="file-text"></u-icon>
				</view>
			</template>
			<template #value>
				<u-button @click="logistics()" text="查看详情" type="success" shape="circle" :customStyle="{height:'36px'}"></u-button>
			</template>
		</u-cell>
		<u-gap height="8"></u-gap>
		<view class="mx-[8px] px-[15px] py-[10px] flex flex-row bg-[#FFFFFF] rounded-[4px]" v-for="(item,index) in instance.SkuList" :key="item.SkuID">
			<u-image radius="8" :src="item.ImageUrl[0]" class="flex-shrink-0" width="100" height="100"></u-image>
			<view class="flex-1 ml-[8px]">
				<view class="text-[14px] text-[#333333]">{{item.ProductName}}</view>
				<view class="text-[12px] text-[#999999] mt-[4px]">{{item.SkuName}}</view>
				<view class="flex flex-row justify-between text-[12px] text-[#333333] mt-[10px]">
					<u-text size="12" mode="price" :text="item.MemberPrice"></u-text>
					<u-text size="12" :text="`x${item.Num}`"></u-text>
				</view>
			</view>
		</view>
		<u-gap height="8"></u-gap>
		<view class="mx-[8px] px-[15px] py-[10px] bg-[#FFFFFF] rounded-[4px]">
			<!-- <view class="flex flex-row justify-between h-[30px] items-center text-[14px]">
				<text class="text-[#333333]">商品总价</text>
				<text class="text-[#999999]">¥{{instance.Amount}}</text>
			</view> -->
			<view class="flex flex-row justify-between h-[30px] items-center text-[14px]">
				<text class="text-[#333333]">商品总价</text>
				<text class="text-[#d81e06] text-[16px] font-semibold">¥{{instance.OrderAmount}}</text>
			</view>
			<u-line></u-line>
			<view class="flex flex-row justify-between h-[30px] items-center text-[14px]">
				<text class="text-[#333333]">订单编号</text>
				<text class="text-[#999999] ml-[auto]">{{instance.OrderNo}}</text>
				<u-icon @click="copy(instance.OrderNo)" name="file-text" size="20"></u-icon>
			</view>
			<view class="flex flex-row justify-between h-[30px] items-center text-[14px]">
				<text class="text-[#333333]">创建时间</text>
				<text class="text-[#999999]">{{instance.AddDate}}</text>
			</view>
			<view class="flex flex-row justify-between h-[30px] items-center text-[14px]">
				<text class="text-[#333333]">付款时间</text>
				<text class="text-[#999999]">{{instance.PaymentDate}}</text>
			</view>
			<view class="flex flex-row justify-between h-[30px] items-center text-[14px]">
				<text class="text-[#333333]">发货时间</text>
				<text class="text-[#999999]">{{instance.SendDate}}</text>
			</view>
		</view>
		<u-gap height="8"></u-gap>
		<view class="mx-[8px] px-[15px] py-[10px] bg-[#FFFFFF] rounded-[4px] flex flex-row items-center">
			<text class="mr-[16px] text-[#333333] text-[14px]">留言</text>
			<u-input border="bottom" readonly v-model="instance.Remark" placeholder="空"></u-input>
		</view>
		<u-gap height="50" class="pb-safe-nopadding"></u-gap>
		<view v-if="instance.State == 0" class="fixed left-0 bottom-0 w-full h-[50px] z-10 pb-safe-nopadding">
			<view class="h-[50px] flex flex-row items-center px-[16px] justify-end bg-[#FFFFFF]">
				<text class="text-[14px] text-[#333333]">实付积分/金额:</text>
				<text class="text-[16px] text-[#d81e06] font-semibold">¥{{instance.OrderAmount}}</text>
				<u-button @click="pay()" text="继续付款" shape="circle" color="#d81e06" :customStyle="{margin:'0 0 0 16px',height:'32px',padding:'0 24px'}"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, nextTick} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	const instance = ref();
	
	uniapp.onLoad(async option => {
		if(option.id) {
			uni.showLoading();
			const result = await api.orderDetail(store.user.UserID,option.id);
			uni.hideLoading();
			if(result[1]) {
				uni.showModal({
					content:result[1],
					showCancel:false,
					success() {
						uni.navigateBack();
					}
				})
			} else {
				instance.value = result[0];
			}
		} else {
			uni.showModal({
				content:'参数错误',
				showCancel:false,
				success() {
					uni.navigateBack();
				}
			})
		}
	})
	
	const pay = async() => {
		uni.showLoading();
		const res = await api.pay(store.user.UserID,instance.value.OrderID);
		uni.hideLoading();
		await nextTick();
		if(res[1]) {
			uni.showToast({
				icon:'none',
				title:res[1]
			})
		} else {
			//拉起支付
			if(res[0]) {
				
			} else {
				uni.showToast({
					icon:'success',
					title:'支付成功'
				})
				await uni.$u.sleep(800);
				uni.showLoading();
				const result = await api.orderDetail(store.user.UserID,instance.value.OrderID);
				uni.hideLoading();
				if(result[1]) {
					uni.showModal({
						content:result[1],
						showCancel:false,
						success() {
							uni.navigateBack();
						}
					})
				} else {
					instance.value = result[0];
				}
			}
		}
	}
	
	const copy = e => {
		uni.setClipboardData({
			data:e,
			success() {
				uni.showToast({
					icon:'success',
					title:'复制成功'
				})
			}
		})
	}
	
	const logistics = () => {
		uni.navigateTo({
			url:`/pages/logistics/logistics?orderId=${instance.value.OrderID}&logisticsNo=${instance.value.LogisticsNo}&logisticsName=${instance.value.LogisticsName}`
		})
	}
</script>

<style>
</style>